<template>
  <div class="lei_table">
    <el-table
      v-if="isShowTable"
      ref="multipleTable"
      :data="tableData"
      style="width: 100%; margin-top: 30px"
      border
      row-key="id"
      :default-expand-all="isExpend"
      :select-on-indeterminate="false"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      @sort-change="sortChange"
      @select="select"
      @select-all="selectAll"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <!-- <el-table-column label="序号" type="index" width="50" align="center">
        <template scope="scope"> -->
      <!-- 有分页时，序号显示 -->
      <!-- <span v-if="pageObj">{{
            (pageObj.currentPage - 1) * pageObj.size + scope.$index + 1
          }}</span> -->
      <!-- 无分页时，序号显示 -->
      <!-- <span v-else>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column> -->
      <template v-for="(col, index) in columns">
        <!-- 操作列/自定义列 -->
        <slot v-if="col.slot" :name="col.slot"></slot>
        <!-- 普通列 -->
        <el-table-column
          v-else
          :key="index"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          :formatter="col.formatter"
          :sortable="col.sortable ? 'custom' : false"
          align="center"
        >
        </el-table-column>
      </template>
    </el-table>
    <!-- 是否调用分页 -->
    <div class="footer">
      <div class="footer_left" v-if="operation">
        <el-button @click="selectChange(1)">选择全部</el-button>
        <el-button @click="selectChange(2)">反向选择</el-button>
        <el-button @click="toggleSelection()" v-if="!clear">清除选择</el-button>
        <el-button @click="delSelection" v-if="!del">删除所选</el-button>
        <el-select v-if="select" placeholder="更多操作" v-model="selectVal">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="footer_right">
        <el-pagination
          v-if="pageObj"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageObj.pageNum"
          :page-size="pageObj.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageObj.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      },
    },
    columns: {
      type: Array,
      default: () => {
        return []
      },
    },
    pageObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
    clear: {
      type: Boolean,
      default: false,
    },
    del: {
      type: Boolean,
      default: false,
    },
    select: {
      type: Boolean,
      default: false,
    },
    operation: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      multipleSelection: [],
      options: [
        { label: '操作一', value: 1 },
        { label: '操作一', value: 2 },
        { label: '操作一', value: 3 },
        { label: '操作一', value: 4 },
      ],
      selectVal: '',
      isShowTable: true,
      isExpend: false,
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },

    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },

    // 选择全部
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('handleSelectionChange', val)
    },

    // 取消多选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    // 删除所选
    delSelection() {
      this.$emit('delSelection')
    },

    // 反向选择
    toggleSelectionChange() {
      this.$emit('toggleSelectionChange')
    },

    sortChange(column) {
      this.$emit('sort-change', column)
    },

    // 全选/反选
    selectChange(idx) {
      if (idx == 1) {
        this.tableData.forEach((item) => {
          this.$refs.multipleTable.toggleRowSelection(item, true)
          if (item.children) this.setChildren(item.children, true)
        })
      } else {
        this.tableData.forEach((item) => {
          this.$refs.multipleTable.toggleRowSelection(item)
          if (item.children) this.setChildren(item.children)
          // else this.$refs.multipleTable.toggleRowSelection(item)
        })
      }
    },

    setChildren(children, type) {
      // 编辑多个子层级
      children.map((j) => {
        this.toggleSelection(j, type)
        if (j.children) {
          this.setChildren(j.children, type)
        }
      })
    },

    toggleSelection(row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.multipleTable &&
            this.$refs.multipleTable.toggleRowSelection(row, select)
        })
      }
    },
    // 选中父节点时，子节点一起选中取消
    select(selection, row) {
      console.log('aahfda', row)
      if (
        selection.some((el) => {
          return row.id === el.id
        })
      ) {
        if (row.children) {
          // row.childList.map(j => {
          //     this.toggleSelection(j, true)
          // })
          // 解决子组件没有被勾选到
          this.setChildren(row.children, true)
        }
      } else {
        if (row.children) {
          // row.childList.map(j => {
          //     this.toggleSelection(j, false)
          // })
          this.setChildren(row.children, false)
        }
      }
    },

    // 选择全部
    selectAll(selection) {
      // tabledata第一层只要有在selection里面就是全选
      const isSelect = selection.some((el) => {
        const tableDataIds = this.tableData.map((j) => j.id)
        return tableDataIds.includes(el.id)
      })
      // tableDate第一层只要有不在selection里面就是全不选
      const isCancel = !this.tableData.every((el) => {
        const selectIds = selection.map((j) => j.id)
        return selectIds.includes(el.id)
      })
      if (isSelect) {
        selection.map((el) => {
          if (el.children) {
            // 解决子组件没有被勾选到
            this.setChildren(el.children, true)
          }
        })
      }
      if (isCancel) {
        this.tableData.map((el) => {
          if (el.children) {
            // 解决子组件没有被勾选到
            this.setChildren(el.children, false)
          }
        })
      }
      console.log('this.tableData', this.tableData)
    },
  },
}
</script>

<style lang="scss" scoped>
.footer {
  width: 100%;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow-y: auto;
  overflow-x: hidden;
  .footer_left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    .el-button {
      margin-right: 10px;
    }
  }
}
</style>